<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<div th:replace="common/header::header('考生报名信息统计')"></div>
<body>
<div id="wrapper" class="row">
    <div th:replace="common/header::nav"></div>
    <div id="page-inner">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width: 600px;height:400px;"></div>
            </div>
        </div>
        <!-- /. ROW  -->
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
            </div>
        </div>
        <!-- /. ROW  -->
    </div>
    <!-- /. PAGE INNER  -->
</div>
<!-- /. WRAPPER  -->

<div th:replace="common/footer"></div>
<script type="text/javascript">
    var data;
    function getExam(){
        $.ajax({
            type : "post",
            url : "/erems/exam/registInfo",    //url根据自己的项目实际定义
            async : false,
            dataType : "text",
            error : function() {
                alert("系统忙，请稍后再试！");
                return false;
            },
            success : function(text) {
                data = eval("("+text+")");
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '报名信息统计'
                    },
                    tooltip: {},
                    legend: {
                        data:['人数']
                    },
                    grid:{
                        bottom:120,
                        right:100
                    },
                    xAxis: {
                        name:'考试名称',
                        data: [],
                        axisLabel:{
                            interval:0,//横轴信息全部显示
                            rotate:-30,//-30度角倾斜显示
                        }
                    },
                    yAxis: {},
                    series: [{
                        name: '人数',
                        type: 'bar',
                        data: []
                    }]
                };
                for(var o in data){
                    option.xAxis.data.push(data[o].name);
                    option.series[0].data.push(data[o].count);
                }
//                console.log(data);
//                console.log(option);
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    }
    getExam();

</script>
</body>
</html>